<template>
    <div class="goodsinfo">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotu="lunbotu" :imgname="'src'" :isfull="false"></swiper>
                </div>
            </div>
		</div>
        <div class="mui-card">
            <div class="mui-card-header">页眉</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        <span style="margin-right:6%"><del>市场价:￥{{goodsinfo.market_price}}</del></span>销售价:
                        <span style="font-size:16px; color:red; font-weight:bold">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <p class="goumai">
                        <span>购买数量:</span><nobox :max="goodsinfo.stock_quantity" class="goumaishuliang"></nobox>
                    </p>
                    <div>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
                    </div>
                </div>
            </div>
		</div>
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsinfo.goods_no}}</p>
                    <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
                    <p>上架时间：{{goodsinfo.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer btnarea">
                <mt-button type="primary" size="large" plain @click="goToGoodsDesc">图文介绍</mt-button>
               
                <mt-button type="danger" size="large" plain @click="goToGoodsComment">商品评论</mt-button>
            </div>
		</div>
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
</template>

<script>
import swiper from '../sub-compoents/Swiper.vue'
import nobox from '../sub-compoents/GoodsInfo_nobox.vue'
import mui from '../../../lib/mui/js/mui.js'
import {mapMutations} from "vuex"

export default {
    data(){
        return{
            lunbotu:[],
            goodsinfo:[],
            flag:false,//小球初始隐藏
        }
    },
    methods:{
        ...mapMutations(["addToCar"]),
        async getlunbotu(){
            const {data} = await this.$http.get('/api/getthumimages/'+this.id)
            if(data.status===0) this.lunbotu=data.message
        },
        async getGoodsInfoById(){
            const {data} = await this.$http.get('/api/goods/getinfo/'+this.id)
            if(data.status===0) this.goodsinfo=data.message[0]
        },
        goToGoodsDesc(){
            //编程式导航
            this.$router.push("/home/goodsdesc/"+this.goodsinfo.id)
        },
        goToGoodsComment(){
             this.$router.push("/home/goodscomment/"+this.goodsinfo.id)
        },
        addToCart(){
            //点击加入购物车
            this.flag=!this.flag
            //获取购买的数量
            //通过调用父组件方法把值传递给父组件
            // this.#emit("func",mui(".goumaishuliang").numbox().getValue())
            // this.$store.commit("addToCar",{
            //     id:this.id,
            //     count:mui(".mui-numbox").numbox().getValue()//当前选择框里的值
            // })
            this.addToCar({id:this.id,count:mui(".mui-numbox").numbox().getValue(),selected:true,price:this.goodsinfo.sell_price})
        },
        beforeEnter(el){
            //入场动画开始之前的起始状态
            el.style.transform="translate(0,0)"
        },
        enter(el,done){
            //动态获取小球坐标
            //badge元素在App.vue中，通过父子传元素麻烦，可以操作DOM元素获取
            const ballPos=el.getBoundingClientRect();
            const badgePos = document.getElementById("badge").getBoundingClientRect()
            const left =badgePos.left-ballPos.left
            const top =badgePos.top-ballPos.top

            el.offsetWidth
            //入场动画结束后的终止状态,done回调函数的引用
             el.style.transform="translate("+left+"px,"+top+"px)";
             //使用贝塞尔曲线
             el.style.transition="all 0.3s cubic-bezier(.28,.02,.95,.22)";
             done()
        },
        afterEnter(el){
            //入场动画完成后的回调函数
            this.flag=!this.flag
        }

    },
    props:["id"],
    created(){
        this.getlunbotu()
        this.getGoodsInfoById()
    },
    components:{
        swiper,
        nobox
    },
    mounted() {
        mui(".mui-numbox").numbox()
        // this.count=mui(".goumaishuliang").numbox().getValue(),
        // mui(".goumaishuliang").numbox().setOption('step',1)
    },
}
</script>

<style lang="scss" scoped>
    .goodsinfo{
        background-color: #eee;
        overflow: hidden;
    }
    .btnarea{
        flex-direction: column;
        button + button{
            margin-top: 3%;
        }
    }
    .goumai{
        span{
            margin-top: 3%;
            margin-right: 3%;
        }
        display: flex;
    }
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color:red;
        //让小球脱离标准流
        position: absolute;
        z-index: 99;
        left: 139px;
        top: 372px;
        // transform: translate(98px,249px);
    }
</style>